<template>
	<div>
		<div class="layout-breadcrumb">
			<Breadcrumb>
			    <BreadcrumbItem href="/">首页</BreadcrumbItem>
			    <BreadcrumbItem href="/configs/">系统配置</BreadcrumbItem>
			    <BreadcrumbItem href="/configs/config">公共配置</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="layout-content">
		    <div class="layout-content-main">
		    	<Alert type="warning">系统全局配置库、如不明白,请勿进行任何操作</Alert>
		    	<Row>
		    		<ICol span="6"><IButton type="primary" @click="newConfig"  v-if="perCheck.configs_config_create">添加新配置</IButton></ICol>
					<ICol span="6" offset="11"><Search @resetTable="resetTable"></Search></ICol>
		    	</Row>
		    	<BaseTable ref="table" :url="table.url" :header="table.header" ></BaseTable>
		    	<Update ref="update" @resetTable="resetTable"></Update>
		    </div>
		</div>
	</div>
</template>
<script>
	import {Row,Col} from 'iview/src/components/grid';
	import Breadcrumb from 'iview/src/components/breadcrumb';
	import Alert from 'iview/src/components/alert';
	import IButton from 'iview/src/components/button';

	import Axios from 'admin/config/axios';
	import BaseTable  from 'admin/components/table/base';
	import Update from 'admin/components/configs/config/update';
	import Search from 'admin/components/configs/config/search';
	import {Permissions,Check} from 'admin/config/permissions';

	export default{
		components:{
			Row,
            'ICol':Col,
            Breadcrumb,
            'BreadcrumbItem' : Breadcrumb.Item,
            BaseTable,
            Alert,
            IButton,
            Update,
            Search
        },
        data () {
            return {
            	table:{
            		url : '/admin/configs/config/view/list',
            		header: []
            	},
            	perCheck : Permissions,
            }
        },
        methods:{
        	resetTable(params){
        		this.$refs['table'].tableData(params);
        	},
        	newConfig(){
        		this.$refs['update'].modal = true;
        	}
        },
        created:function(){
        	//获取用户当前模块权限列表
            Check('configs/config',this.perCheck).then(res=>{
                this.perCheck = res;
            });
        	this.table.header =  [
                {
			        title: '配置名',
			        key: 'key'
			    },
			    {
			        title: '配置值',
			        key: 'vue'
			    },
			    {
			        title: '开关',
			        key: 'switch',
			        render: (h, params) => {
			        	return params.row.switch==1 ? '开' : '关';
			        }
			    },
			    {
			        title: '状态',
			        key: 'status'
			    },
			    {
			        title: '类型',
			        key: 'type'
			    },
			    {
			        title: '描述',
			        key: 'desc'
			    },
			    {
			        title: '操作',
			        key: 'action',
			        width: 150,
			        align: 'center',
			        render: (h, params) => {
			            return h('div', [
			            	!this.perCheck.configs_config_update ? '' :
			                h(IButton, {
			                    props: {
			                        type: 'primary',
			                        size: 'small'
			                    },
			                    style: {
			                        marginRight: '5px'
			                    },
			                    on: {
			                        click: () => {
			                        	var update = this.$refs['update'];

			                        	Axios.Configs.Config.Get(params.row.id)
							            .then(res =>{
							                if(!res) return false;
							                var data = res.data;
											update.form.id     = params.row.id;
											update.form.key    = data['key'];
											update.form.vue    = data['vue'];
											update.form.switch = data['switch']==1 ? true : false;
											update.form.status = data['status'];
											update.form.type   = data['type'];
											update.form.desc   = data['desc'];
							                update.modal = true;
							            })
			                        }
			                    }
			                }, '编辑'),
			                !this.perCheck.configs_config_delete ? '' :
			                h(IButton, {
			                    props: {
			                        type: 'error',
			                        size: 'small'
			                    },
			                    on: {
			                        click: () => {
			                        	this.$Modal.confirm({
						                    title: '你确定要删除吗？',
						                    content: '一旦删除无法恢复',
						                    onOk: () => {
						                        Axios.Configs.Config.Del(params.row.id)
									            .then(res =>{
									                if(!res) return false;
									                this.$refs['table'].tableData();
									            })
						                    }
						                });
			                        }
			                    }
			                }, '删除')
			            ]);
			        }
			    }
            ];
        }

	}
</script>